<template>
  <div>
    <template v-for = "(item,index) in basicForm" v-if = "basicForm.length!=0">
      <a-form-model :ref = "'basicForm'+index" layout = "inline" :model = "basicForm[index]"
                    @cancel = "()=>basicForm[index] = {}" :rules = "basicRules">
        <a-collapse :activeKey = "activeKey" @change = "onChange">
          <a-collapse-panel :key = "index" >
            <template slot="header">{{item.monitorFactorsName}}</template>
            <a slot = "extra">
              <template v-if="!$attrs.isHide">
                <a-button @click.stop = "onEdit(index)" size="small" type = "primary" icon = "edit" v-show = "item.isEditButton">修改
                </a-button>
                <a-button @click.stop = "onDel(index)" size="small" type = "danger" icon = "delete" v-show = "item.isEditButton">删除
                </a-button>
                <a-button @click.stop = "onCancel(index)" size="small" icon = "close" v-show = "!item.isEditButton">取消
                </a-button>
                <a-button @click.stop = "onSave(index)" size="small" type = "primary" icon = "check" v-show = "!item.isEditButton">保存
                </a-button>
              </template>

            </a>
            <a-row type = "flex" justify = "center">
              <a-col :span = "8">
                <a-form-model-item label = "污染因子名称" prop = "monitorFactorsName">
                  <a-cascader
                      :disabled = "item.isDisable"
                      :value="item.arrayName"
                      :field-names = "{ label: 'nameOf', value: 'id', children: 'waringTypePoList' }"
                      placeholder = ""
                      :show-search = "true"
                      :options = "treeList"
                      :display-render = "displayRender"
                      @change = "onMonitorFactorsNameOf"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span = "8">
                <a-form-model-item label = "设备名称" prop = "monitorEquipmentName">
                  <a-input v-model = "item.monitorEquipmentName" :disabled = "item.isDisable" />
                </a-form-model-item>
              </a-col>
              <a-col :span = "8">
                <a-form-model-item label = "采样周期(时)" prop = "samplPeriod">
                  <a-select v-model = "item.samplPeriod" :disabled = "item.isDisable">
                    <a-select-option :value = "detail" v-for = "(detail) in emissionLaw" :key = "detail">
                      {{ detail }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row type = "flex" justify = "center">
              <a-col :span = "8">
                <a-form-model-item label = "浓度超标值上限" prop = "concentrationMax">
                  <a-input v-model.number = "item.concentrationMax" :disabled = "item.isDisable" />
                </a-form-model-item>
              </a-col>
              <a-col :span = "8">
                <a-form-model-item label = "浓度超标值下限" prop = "concentrationMin">
                  <a-input v-model.number = "item.concentrationMin" :disabled = "item.isDisable" />
                </a-form-model-item>
              </a-col>
              <a-col :span = "8">
                <a-form-model-item label = "是否上报" prop = "isReport">
                  <a-checkbox v-model = "item.isReport" value = "true" name = "isReport"
                              :disabled = "item.isDisable"></a-checkbox>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row type = "flex" justify = "center">
              <a-col :span = "8">
                <a-form-model-item label = "量程上限" prop = "normalMax">
                  <a-input v-model.number = "item.normalMax" :disabled = "item.isDisable" />
                </a-form-model-item>
              </a-col>
              <a-col :span = "8">
                <a-form-model-item label = "量程下限" prop = "normalMin">
                  <a-input v-model.number = "item.normalMin" :disabled = "item.isDisable" />
                </a-form-model-item>
              </a-col>
              <a-col :span = "8">
                <a-form-model-item label = "是否报警" prop = "isWarning">
                  <a-checkbox v-model = "item.isWarning" value = "true" name = "isWarning"
                              :disabled = "item.isDisable"></a-checkbox>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row type = "flex" justify = "center">
              <a-col :span = "8">
                <a-form-model-item label = "正常上限百分比报警值" prop = "normalPercentage">
                  <a-input v-model.number = "item.normalPercentage" :disabled = "item.isDisable" />
                </a-form-model-item>
              </a-col>
              <a-col :span = "8">
                <a-form-model-item label = "折算区间最大值" prop = "convertMax">
                  <a-input v-model.number = "item.convertMax" :disabled = "item.isDisable" />
                </a-form-model-item>
              </a-col>
              <a-col :span = "8">
                <a-form-model-item label = "折算区间最小值" prop = "convertMin">
                  <a-input v-model.number = "item.convertMin" :disabled = "item.isDisable" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row type = "flex" justify = "center">
              <a-col :span = "8">
                <a-form-model-item label = "报警规则">
                  <a-select v-model = "item.warningRule" :disabled = "item.isDisable">
                    <a-select-option :value = "_item.id" v-for = "(_item,index) in warningRule" :key = "_item.id">
                      {{ _item.name }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span = "8">
                <a-form-model-item label = "是否启用" prop = "status">
                  <a-checkbox v-model = "item.status" value = "true" name = "status"
                              :disabled = "item.isDisable"></a-checkbox>
                </a-form-model-item>
              </a-col>
              <a-col :span = "8">
                <a-form-model-item label = "统计做样个数">
                  <a-input :disabled = "item.isDisable" />
                </a-form-model-item>
              </a-col>

            </a-row>
            <a-row type = "flex" justify = "center">
              <a-col :span = "8">
                <a-form-model-item label = "排序" prop = "sort">
                  <a-input v-model.number = "item.sort" :disabled = "item.isDisable" />
                </a-form-model-item>
              </a-col>
              <a-col :span = "8">

              </a-col>
              <a-col :span = "8">

              </a-col>
            </a-row>
            <a-row type = "flex" justify = "center">
              <a-col :span = "24">
                <a-form-model-item label = "执行标准" style="width: 93%">
                  <a-input :disabled = "item.isDisable" />
                </a-form-model-item>
              </a-col>
            </a-row>


            <div class = "putOnRecords">
              <div class = "putOnRecordsTitle">> 数采仪程序配置情况</div>
              <div class = "putOnRecordsContent">
                <a-row type = "flex" justify = "center">
                  <a-col :span = "8">
                    <a-form-model-item label = "串口">
                      <a-input :disabled = "item.isDisable" />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span = "8">
                    <a-form-model-item label = "类型">
                      <a-input :disabled = "item.isDisable" />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span = "8">
                    <a-form-model-item label = "拟量量程">
                      <a-select :disabled = "item.isDisable">
                        <a-select-option value = "暂无">
                          暂无
                        </a-select-option>
                      </a-select>
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </div>
            </div>
          </a-collapse-panel>
        </a-collapse>
      </a-form-model>
      <div style = "height: 10px"></div>
    </template>

    <a-button v-if="!$attrs.isHide" class = "addPoint" @click = "onAddPoint" type = "primary" icon = "plus-circle">新增</a-button>
    <!-- 添加弹框 -->
    <a-modal v-model = "addPoint" width = "80%" title = "新增监测因子" centered @cancel = "()=>form = {}"
             :maskClosable = "false" destroyOnClose>
      <a-form-model ref = "form" layout = "inline" :model = "form" @cancel = "()=>form = {}" :rules = "basicRules">
        <a-collapse :activeKey = "[1,2]">
          <a-collapse-panel key = "1" header = "污染因子新增">
            <a-row type = "flex" justify = "center">
              <a-col :span = "8">
                <a-form-model-item label = "污染因子名称" prop = "monitorFactorsName">
                  <a-cascader
                      :field-names = "{ label: 'nameOf', value: 'id', children: 'waringTypePoList' }"
                      placeholder = ""
                      :show-search = "true"
                      :options = "treeList"
                      :display-render = "displayRender"
                      @change = "onMonitorFactorsName"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span = "8">
                <a-form-model-item label = "设备名称" prop = "monitorEquipmentName">
                  <a-input v-model = "form.monitorEquipmentName" />
                </a-form-model-item>
              </a-col>
              <a-col :span = "8">
                <a-form-model-item label = "采样周期(时)" prop = "samplPeriod">
                  <a-select v-model = "form.samplPeriod">
                    <a-select-option :value = "item" v-for = "(item,index) in emissionLaw" :key = "item">
                      {{ item }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row type = "flex" justify = "center">
              <a-col :span = "8">
                <a-form-model-item label = "浓度超标值上限" prop = "concentrationMax">
                  <a-input v-model.number = "form.concentrationMax" />
                </a-form-model-item>
              </a-col>
              <a-col :span = "8">
                <a-form-model-item label = "浓度超标值下限" prop = "concentrationMin">
                  <a-input v-model.number = "form.concentrationMin" />
                </a-form-model-item>
              </a-col>
              <a-col :span = "8">
                <a-form-model-item label = "是否上报" prop = "isReport">
                  <a-checkbox v-model = "form.isReport" :checked="form.isReport" value = "true" name = "isReport"></a-checkbox>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row type = "flex" justify = "center">
              <a-col :span = "8">
                <a-form-model-item label = "量程上限" prop = "normalMax">
                  <a-input v-model.number = "form.normalMax" />
                </a-form-model-item>
              </a-col>
              <a-col :span = "8">
                <a-form-model-item label = "量程下限" prop = "normalMin">
                  <a-input v-model.number = "form.normalMin" />
                </a-form-model-item>
              </a-col>
              <a-col :span = "8">
                <a-form-model-item label = "是否报警" prop = "isWarning">
                  <a-checkbox v-model = "form.isWarning" :checked="form.isWarning" value = "true" name = "isWarning"></a-checkbox>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row type = "flex" justify = "center">
              <a-col :span = "8">
                <a-form-model-item label = "正常上限百分比报警值" prop = "normalPercentage">
                  <a-input v-model.number = "form.normalPercentage" />
                </a-form-model-item>
              </a-col>
              <a-col :span = "8">
                <a-form-model-item label = "折算区间最大值" prop = "convertMax">
                  <a-input v-model.number = "form.convertMax" />
                </a-form-model-item>
              </a-col>
              <a-col :span = "8">
                <a-form-model-item label = "折算区间最小值" prop = "convertMin">
                  <a-input v-model.number = "form.convertMin" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row type = "flex" justify = "center">
              <a-col :span = "8">
                <a-form-model-item v-model = "form.warningRule" label = "报警规则">
                  <a-select>
                    <a-select-option :value = "item.id" v-for = "(item,index) in warningRule" :key = "item.id">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span = "8">
                <a-form-model-item label = "是否启用" prop = "status">
                  <a-checkbox v-model = "form.status" :checked="form.status" value = "true" name = "status"></a-checkbox>
                </a-form-model-item>
              </a-col>
              <a-col :span = "8">
                <a-form-model-item label = "统计做样个数">
                  <a-input />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span = "8">
                <a-form-model-item label = "排序" prop = "sort">
                  <a-input v-model.number = "form.sort"  />
                </a-form-model-item>
              </a-col>
              <a-col :span = "8"></a-col>
              <a-col :span = "8"></a-col>
            </a-row>
            <a-row>
              <a-col :span = "24">
                <a-form-model-item label = "执行标准" style="width: 93%">
                  <a-input />
                </a-form-model-item>
              </a-col>
            </a-row>


            <div class = "putOnRecords">
              <div class = "putOnRecordsTitle">> 数采仪程序配置情况</div>
              <div class = "putOnRecordsContent">
                <a-row type = "flex" justify = "center">
                  <a-col :span = "8">
                    <a-form-model-item label = "串口">
                      <a-input />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span = "8">
                    <a-form-model-item label = "类型">
                      <a-input />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span = "8">
                    <a-form-model-item label = "拟量量程">
                      <a-select>
                        <a-select-option value = "暂无">
                          暂无
                        </a-select-option>
                      </a-select>
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </div>
            </div>
          </a-collapse-panel>
        </a-collapse>
      </a-form-model>
      <template slot = "footer">
        <a-button type = "primary" @click = "onSubmit">确定</a-button>
      </template>
    </a-modal>
  </div>

</template>

<script>
import buttonEvent from "@/views/components/mixin/buttonEvent";

export default {
  props: {
    monitorId: {
      type: String,
      required: true
    },

  },

  name: "monitoringFactors",
  data() {
    return {
      tableIndex:'',
      activeKey: [0],
      addPoint: false,
      basicForm: [],
      basicFormOf: [],
      form: {
        monitorFactorsName: '',
        monitorEquipmentName: '',
        monitorEquipmentFactory: '',
        samplPeriod: '',
        concentrationMin: '',
        concentrationMax: '',
        normalMin: '',
        normalMax: '',
        normalPercentage: '',
        isWarning: true,
        isReport: true,
        status: true,
        convertMax: '',
        convertMin: '',
        monitorFactorsCode: '',
        unit: '',
        monitorId: this.monitorId,
        warningRule: '',
        sort:''
      },
      formOf: {
        monitorFactorsName: '',
        monitorEquipmentName: '',
        monitorEquipmentFactory: '',
        samplPeriod: '',
        concentrationMin: '',
        concentrationMax: '',
        normalMin: '',
        normalMax: '',
        normalPercentage: '',
        isWarning: true,
        isReport: true,
        status: true,
        convertMax: '',
        convertMin: '',
        monitorFactorsCode: '',
        unit: '',
        monitorId: this.monitorId,
        warningRule: '',
        sort:''
      },
      warningRule: [
        {id: 1, name: '溶度报警'},
        {id: 2, name: '折算值报警'}
      ],
      emissionLaw: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24,'连续','间断', '其他'],
      labelCol: {
        span: 8
      },
      basicRules: {
        monitorFactorsName: [
          {required: true, message: '请输入监控点编号', trigger: 'blur'}
        ],
        monitorEquipmentName: [
          {required: true, message: '请输入设备名称', trigger: 'blur'}
        ],
        concentrationMax: [
          {required: true, message: '请输入浓度超标值上限', trigger: 'blur'},
          {type:"number",message: "请输入数字类型"}
        ],
        concentrationMin: [
          {required: true, message: '请输入浓度超标值下限', trigger: 'blur'},
          {type:"number",message: "请输入数字类型"}
        ],
        normalMax: [
          {required: true, message: '请输入量程上限', trigger: 'blur'},
          {type:"number",message: "请输入数字类型"}
        ],
        normalMin: [
          {required: true, message: '请输入量程下限', trigger: 'blur'},
          {type:"number",message: "请输入数字类型"}
        ],
        samplPeriod: [
          {required: true, message: '请选择采集周期', trigger: 'blur'}
        ],
        sort: [
          {required: true, message: '请输入排序，数字小靠前', trigger: 'blur'},
          {type:"number",message: "请输入数字类型"}
        ],
        normalPercentage:[
          {required: true, message: '请输入正常上限百分比报警值', trigger: 'blur'},
          {type:"number",message: "请输入数字类型"}
        ],
        convertMax: [
          {required: true, message: '请输入折算区间最大值', trigger: 'blur'},
          {type:"number",message: "请输入数字类型"}
        ],
        convertMin: [
          {required: true, message: '请输入折算区间最小值', trigger: 'blur'},
          {type:"number",message: "请输入数字类型"}
        ]
      },
      treeList: []
    }
  },
  methods: {
    onChange(key) {
      console.log(key)
    },
    displayRender({labels}) {
      if (labels.length != 3) {
        return ''
      }
      return labels[2]
    },
    onMonitorFactorsNameOf(value, selectedOptions) {
      this.basicForm[this.tableIndex].unit = selectedOptions[2].unit
      this.basicForm[this.tableIndex].monitorFactorsCode = selectedOptions[2].waringCode
      this.basicForm[this.tableIndex].monitorFactorsName = selectedOptions[2].name
      this.basicForm[this.tableIndex].arrayName=[selectedOptions[0].id,selectedOptions[1].id,selectedOptions[2].id]
      console.log(this.basicForm[this.tableIndex])
    },
    onMonitorFactorsName(value, selectedOptions) {
      this.form.unit = selectedOptions[2].unit
      this.form.monitorFactorsCode = selectedOptions[2].waringCode
      this.form.monitorFactorsName = selectedOptions[2].name
    },
    async getTree() {
      await this.$api.GetfindByTree().then(res => {
        this.treeList = this.treeRecursion(res.data.data)
        console.log(this.treeList)
      })
    },
    findIndexArray(data, name, indexArray) {
      let arr = Array.from(indexArray)
      for (let i = 0, len = data.length; i < len; i++) {
        arr.push(data[i].id)
        if (data[i].waringCode === name) {
          return arr
        }
        let children = data[i].waringTypePoList
        if (children && children.length) {
          let result = this.findIndexArray(children, name, arr)
          if (result) return result
        }
        arr.pop()
      }
      return false
    },
    async getMonitorFactorsList() {
      if (this.treeList.length == 0) {
        await this.getTree()
      }
      console.log(this.treeList)
      await this.getMonitorFactorsListOf();

    },
    async getMonitorFactorsListOf() {
      await this.$api.getMonitorFactorsList(this.monitorId).then(res => {
        res.data.data.forEach(item => {
          item.isEditButton = true
          item.isDisable = true
          item.arrayName = this.findIndexArray(this.treeList, item.monitorFactorsCode, []);
        })
        this.basicForm = res.data.data
        this.basicFormOf = JSON.parse(JSON.stringify(res.data.data))
        this.$forceUpdate()
        console.log(this.basicForm)
      })
    },
    treeRecursion(dataList) {
      function tree(item) {
        let arr = []
        item.forEach(_item => {
          let obj = {
            parentId: _item.parentId,
            id: _item.id,
            name: _item.name,
            waringCode: _item.waringCode,
            unit: _item.unit,
            dataType: _item.dataType,
            nameOf:_item.name
          }
          if(!!_item.waringCode){
            obj.nameOf=_item.name+'('+_item.waringCode+')'
          }
          if (_item.waringTypePoList && _item.waringTypePoList.length != 0) {
            obj.waringTypePoList = tree(_item.waringTypePoList)
          }
          arr.push(obj)
        })
        return arr
      }

      return tree(dataList)
    },
    onAddPoint() {
      this.addPoint = true;
    },
    onEdit(index) {
      console.log(index)
      this.tableIndex=index
      this.basicForm[index].isEditButton = !this.basicForm[index].isEditButton;
      this.basicForm[index].isDisable = !this.basicForm[index].isDisable;
    },
    onDel(index) {
      let _that = this;
      this.$confirm({
        title: "是否删除监测因子【" + this.basicForm[index].monitorFactorsName + "】？",
        onOk() {
          _that.$api.removeMonitorFactorsList(_that.basicForm[index].id).then(res => {
            if (res.data.code == 0) {
              _that.getMonitorFactorsListOf();
              _that.$message.success('删除成功')
            } else {
              _that.$message.error(res.data.errorMessage)
            }
          })
        },
        onCancel() {
          console.log("Cancel");
        },
        class: "delk",
      });
    },
    onCancel(index) {
      console.log(this.basicForm[index])
      console.log(this.basicFormOf[index])
      this.basicForm[index]=this.basicFormOf[index]
      this.basicForm[index].isEditButton = true;
      this.basicForm[index].isDisable = true;
      this.$refs['basicForm'+[index]][0].clearValidate();
      this.$forceUpdate()
    },
    onSave(index) {
      let basic = this.$refs['basicForm' + index][0]

      basic.validate(valid => {
        if (!valid) {
          return false;
        }
        this.$api.editMonitorFactorsList(this.basicForm[index]).then(res => {
          if (res.data.code == 0) {
            //this.cancelDispose(index);
            this.$message.success('修改完成')
            this.basicForm[index].isEditButton = !this.basicForm[index].isEditButton;
            this.basicForm[index].isDisable = !this.basicForm[index].isDisable;
            //this.getMonitorFactorsList();
          } else {
            this.$message.error(res.data.errorMessage)
          }
        })
      });
    },
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return false;
        }
        this.form.monitorId = this.monitorId
        console.log(this.form)
        this.$api.addMonitorFactorsList(this.form).then(res => {
          if (res.data.code == 0) {
            this.getMonitorFactorsList();
            this.addPoint = false;
            this.form = this.formOf
            this.$message.success('添加成功')
          } else {
            this.$message.error(res.data.errorMessage)
          }
        })
      });
    }
  },
  watch: {
    monitorId(val) {
      this.$nextTick(() => {
        this.getMonitorFactorsList();
        this.$forceUpdate()
      })
    }
  }
}
</script>

<style scoped lang = "scss">
@import "../../components/style/style.scss";

.putOnRecords {
  position: relative;
}

.putOnRecordsTitle {
  padding-left: 22px;
  position: absolute;
  left: -18px;
  right: -18px;
  height: 46px;
  border: 1px solid #e8e8e8;
  line-height: 46px;
  font-size: 16px;
  background: transparent;
}

.putOnRecordsContent {
  padding-top: 50px;
}

.addPoint {
  color: rgba(255, 255, 255, 0.6);
  width: 200px;
  height: 50px;
  position: relative;
  margin-left: -100px;
  left: 50%;
  margin-top: 200px;
  margin-bottom: 200px;
}

.addPoint ::v-deep .ant-calendar-picker-icon, .addPoint ::v-deep .anticon {
  color: rgba(255, 255, 255, 0.6);
}


</style>
